/*
 * @Description: switch 开关
 * @Author: kanglin
 * @Date: 2018-08-29 16:12:46
 * @Copyright: Created by Panxsoft.
 */

<style lang="less" scoped rel="stylesheet/less" type="text/less" >
    @import '~src/assets/css/common.less';
    .v-com-switch{
        position: relative;
        display: inline-block;
        width: 80 * @rem-per-px;
        height: 38 * @rem-per-px;
        border: 1px solid #FFAECC;
		border-radius: 20 * @rem-per-px;
		background-repeat: no-repeat;
		background-size: 30* @rem-per-px;
		line-height: normal;
		vertical-align: middle;

        .switch__label {
            position: absolute;
            display: inline-block;
            width: 30* @rem-per-px;
            height: 30* @rem-per-px;
            border-radius: 50%;
            margin: 4* @rem-per-px;
            // background: #FFAECC;
			transition: 0.2s ease-out;
			background-repeat: no-repeat;
			background-size: 100%;
		}

		&.on{
			background-position: 90% 50%;
			background-image: url('../../assets/media/img/2.3.9/lishi_icon_click.png')
		}

		&.off{
			background-position: 90% 50%;
			background-image: url('../../assets/media/img/2.3.9/lishi_icon_normal.png')
		}

		&.on .switch__label{
			// background-position: 10% 50%;
			left:0 * @rem-per-px ;
			background-image: url('../../assets/media/img/2.3.9/jinri_icon_normal.png')
		}
		&.off .switch__label{
			// left: 40 * @rem-per-px;
			background-image: url('../../assets/media/img/2.3.9/jinri_icon_click.png')
		}

    }
</style>

<template>
	<div
		:class="{on:is_checkbox_enable, off:!is_checkbox_enable}"
		class="v-com-switch m-switch"
		@click="toggle">
		<input
			ref="checkbox"	
			v-model="is_checkbox_enable"
			type="checkbox"
			hidden>
		<i
			:style="{background: handlerBg}"
			class="switch__label"
		/>
	</div>
</template>

<script>
// import off_icon from 'src/assets/media/img/common/close';
import on_icon from 'src/assets/media/img/user/records/image/selected_maokong';

// import info_icon from 'src/assets/media/img/user/icon_info';
// import activity_icon from 'src/assets/media/img/user/huodong_icon';

export default {
	name: 'MSwitch',
	props: {
		value: {
			type: Boolean,
			default() {
				return true;
			},
		},
	},
	data() {
		return {
			// off_icon,
			// on_icon,
			handlerBg: on_icon,
			is_checkbox_enable: null,
		};
	},
	created() {
		this.is_checkbox_enable = this.value;
	},
	methods: {
		toggle() {
			this.is_checkbox_enable = !this.is_checkbox_enable;
			this.$emit('on-change', this.is_checkbox_enable);
			this.$emit('update:value', this.is_checkbox_enable);
		},
	},
};
</script>
